<template>
  <div ref="opwRef" class="operation-popup-window" :style="opwStyle">
    <div :class="`window-box ${location[0]}`">
      <div class="o-p-w-c">
        <slot></slot>
      </div>
      <div class="triangle" :style="triangleStyle"></div>
    </div>
  </div>

</template>

<script setup>
const props = defineProps({
  showDrawer: {
    type: Boolean,
    default: false,
  },
  selectModel: {
    type: Object,
    default: {
      width: 0,
      height: 0,
      positionX: 0,
      positionY: 0,
    }
  },
  zIndex: {
    type: String,
    default: "z-index:2011;"
  }
})

const opwRef = ref('opwRef')
const opwStyle = ref('')
const triangleStyle = ref('')

const location = computed(() => {
  let str = ['shang', 0, 0, '']
  let str2 = '5px solid transparent'
  let str3 = '10px solid #313131'
  let strT, strB, strL, strR, strMargin = '';
  console.log('opwRef->', opwRef.value);
  let refwidth = opwRef.value.clientWidth;
  let refheight = opwRef.value.clientHeight;
  let dxw = (refwidth - props.selectModel.width) / 2
  let dyh = (refheight - props.selectModel.height) / 2
  let posX, posY = 0;
  if (str) {
    // 坐标计算
    const x = props.selectModel.positionX - refwidth
    const y = props.selectModel.positionY - refheight
    if (x > 0 && y > 0) {
      str[0] = 'shang'
      str[1] = props.selectModel.positionX
      strL = str2
      strR = str2
      strT = str3
      strMargin = '-1% 50%';
      posX = props.selectModel.positionX - dxw
      posY = props.selectModel.positionY - refheight - 10
    } else {
      str[0] = 'xia'
      strL = str2
      strR = str2
      strB = str3
      strMargin = '-138% 48%';
      posX = props.selectModel.positionX - dxw
      posY = props.selectModel.positionY + props.selectModel.height + 10
      str[1] = props.selectModel.positionX
    }
  }
  triangleStyle.value = `border-top:${strT};border-bottom:${strB};border-right:${strR};border-left:${strL};margin:${strMargin};`
  opwStyle.value = `inset:${posY}px auto auto ${posX}px;` + props.zIndex + props.size
  return str
})


onMounted(() => { })
</script>
<style scoped lang="scss">
.operation-popup-window {
  position: absolute;
  width: 15rem;
  height: 20rem;

  .window-box {
    width: 100%;
    height: 100%;
  }

  .o-p-w-c {
    width: 100%;
    height: 100%;
    background-color: #313131;
    border-radius: 1rem;
    border: 1px solid #fff;

    .el-button {
      width: 100%;
      height: 100%;
      background-color: #313131;
      border-radius: 1rem;
      border: 1px solid #fff;
    }
  }

  .triangle {
    width: 1px;
    height: 0;
  }

  .triangle-shang {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 10px solid #313131;
    margin-left: 50%;
  }

  .triangle-xia {
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #313131;
    margin-left: 50%;
    margin-top: -138%;
  }

  .triangle-zuo {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 10px solid #313131;
    margin-left: 101%;
    margin-top: -70%;
  }

  .triangle-you {
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-right: 10px solid #313131;
    margin-top: -50%;
    margin-left: -4%;
  }
}
</style>